<script lang="ts" setup>
import tzLoading from '@/components/tz-loading.vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

const appStore = useAppStore()



const tableData = ref([])


const handlePositiveClick = (row) => {
  tEquipmentControllerDelbyid(row.id).then(res => {
    toast('删除成功')
    getData()
  })

}

const dialogVisible = ref(false)
const openDialog = () => {
  dialogType.value = 'add'
  dialogVisible.value = true
}
const openEditDialog = (row) => {
  dialogType.value = 'edit'
  rowID.value = row.id
  Object.keys(ruleForm).forEach(v => {
    ruleForm[v] = row[v]
  })
  dialogVisible.value = true
}


const dialogType = ref('add')
const rowID = ref('')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({


  aa: 0,//水分参数A
  bb: 0,//水分参数B
  cc: 0,//酸值参数C
  comk: '',//端口号
  dd: 0,//酸值参数D
  equipmentid: '',//设备编号
  ip: '',//设备ip地址
  kldbz: '',//（颗粒度传感器专有）颗粒度标准1.ISO4406.2.Nas1638 3.SAEAS4059 4.GJB420B)
  nd100: 0,//（颗粒度传感器专有） 100度粘度标准	
  nd40: 0,//（颗粒度传感器专有）40度粘度标准	
  type: '',//传感器类型 0颗粒,1if5,2cmc,3磨粒，4滤油机	
  typeName: '',//传感器类型名称
  ybcom: '',//油泵端口 如果是颗粒传感器，需要提供录入	
  ybip: '',//油泵ip 如果是颗粒传感器，需要提供录入	
  jcb: 0,//击穿电压参数b
  jck: 0,//击穿电压参数k
  jcdygslx: 1,   //击穿电压公式类型
  pygslx: '',//玄武偏移量公式类型（下拉框）
  rs485out: '',
  jdshcs: "",
  mdcs: 0,//密度参数
  shdcs: 0,//水活度参数y
  slwzst50cs: 0,//十六烷指数t50参数

})

const rules = reactive<FormRules<RuleForm>>({
  equipmentid: [
    { required: true, message: '请填写设备编号', trigger: 'blur' },
  ],
  type: [
    { required: true, message: '请选择传感器类型', trigger: 'blur' },
  ],
})


const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!', ruleForm)
      if (dialogType.value == 'add') {
        tEquipmentControllerInsert(ruleForm).then(res => {
          toast('新增成功')
          getData()
        })
      } else {
        let Q = { ...ruleForm }
        Q.id = rowID.value
        tEquipmentControllerUpdate(Q).then(res => {
          console.log(res)
          getData()
        })
        toast('修改成功')
      }


      dialogVisible.value = false
    } else {
      console.log('error submit!', fields)
    }
  })
}


const closeFn = () => {
  Object.keys(ruleForm).forEach(v => {
    ruleForm[v] = ''
  })
  rowID.value = ''
  ruleForm.aa = 0
  ruleForm.bb = 0
  ruleForm.cc = 0
  ruleForm.dd = 0
  ruleForm.nd100 = 0
  ruleForm.nd40 = 0
  ruleForm.jcb = 0
  ruleForm.jck = 0
  ruleForm.jcdygslx = 1
  ruleForm.pygslx = ''
  ruleForm.rs485out = ''
  ruleForm.jdshcs = ''
  ruleForm.mdcs = 0
  ruleForm.shdcs = 0
  ruleForm.slwzst50cs = 0

}


const loading = ref(true)


// search
const searchForm = reactive({
  deviceNumber: '',
  rs485out: '',
  jdshcs: ''
})


const transducerOptions = ref([
  {
    value: 1,
    label: 'ISO4406',
  },
  {
    value: 2,
    label: 'Nas1638',
  },
  {
    value: 3,
    label: 'SAEAS4059',
  },
  {
    value: 4,
    label: 'GJB420B',
  },
])

const jcdygslxOptions = ref([
  {
    value: 1,
    label: '公式一',
  },
  {
    value: 2,
    label: '公式二',
  },
  {
    value: 3,
    label: '公式三',
  },
])




const filterFn = (obj, row) => {
  let item = obj.find(v => v.value === row)
  // console.log(item)
  // console.log(obj)
  console.log(row)
  return item ? item.label : ''
}


const changeselect = (e) => {
  let item = appStore.tEquipmentControllerList.find(v => v.value == e)
  if (item) {
    ruleForm.typeName = item.label
  }
}


const getData = () => {
  loading.value = true
  tEquipmentControllerSelbypage({
    size: 100,
    index: 1,
    equipmentid: searchForm.deviceNumber,
    rs485out: searchForm.rs485out,
    jdshcs: searchForm.jdshcs
  }).then(res => {
    tableData.value = res.result
  }).finally(() => {
    loading.value = false
  })
}

getData()

const txytypev = ref([])
// 获取玄武所有偏移量公式类型列表
tEquipmentControllerGetxytype().then(res => {
  txytypev.value = res.result
})

</script>

<template>
  <tzLoading v-if="loading"></tzLoading>

  <div class="flex flex-col flex-1 overflow-auto" v-else>
    <div class="h-[13%]"></div>
    <div class="px-[25px] flex">

      <el-form-item label="设备编号" class="mr-[40px]">
        <el-input v-model="searchForm.deviceNumber" />
      </el-form-item>
      <el-form-item label="485协议对外地址" class="mr-[40px]">
        <el-input v-model="searchForm.rs485out" />
      </el-form-item>
      <el-form-item label="介电损耗参数" class="mr-[40px]">
        <el-input v-model="searchForm.jdshcs" />
      </el-form-item>


      <el-button class="w-[90px] ml-auto flex justify-center items-center" color="#0c9bc8" @click="getData()">
        <span class="text-[16px] font-medium text-white">查询</span>
      </el-button>


      <el-button @click="openDialog" class="w-[90px]  flex justify-center items-center" color="#009757">
        <span class="text-[16px] font-medium text-white">新增</span>
      </el-button>

    </div>
    <div class="flex-1 p-[25px] overflow-auto">
      <el-table :data="tableData" style="width: 100%">


        <el-table-column prop="equipmentid" label="设备编号" />
        <el-table-column prop="aa" label="水分参数A" />
        <el-table-column prop="bb" label="水分参数B" />
        <el-table-column prop="cc" label="酸值参数C" />
        <el-table-column prop="dd" label="酸值参数D" />
        <el-table-column prop="comk" label="端口号" />
        <el-table-column prop="ip" label="设备ip地址" />
        <el-table-column prop="jck" label="击穿电压参数k" />
        <el-table-column prop="jcb" label="击穿电压参数b" />
        <el-table-column prop="typeName" label="传感器类型名称" />
        <el-table-column prop="kldbz" label="颗粒度标准">
          <template #default="scope">
            <div>
              {{ filterFn(transducerOptions, scope.row.kldbz) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nd100" label="100度粘度标准" />
        <el-table-column prop="nd40" label="40度粘度标准" />
        <el-table-column prop="ybcom" label="油泵端口" />
        <el-table-column prop="ybip" label="油泵ip" />



        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="small" type="warning" @click="openEditDialog(scope.row)">
              <span>修改</span>
            </el-button>

            <n-popconfirm @positive-click="handlePositiveClick(scope.row)">
              <template #trigger>
                <el-button size="small" type="danger">
                  <span class="text-white">删除</span>
                </el-button>
              </template>
              确定要删除吗？
            </n-popconfirm>



          </template>
        </el-table-column>

      </el-table>
    </div>
    <div class="h-[20px]"></div>

    <el-dialog v-model="dialogVisible" :title="dialogType == 'add' ? '新增设备' : '编辑设备'" width="600px" top="20vh"
      @close="closeFn" destroy-on-close>
      <div class="flex justify-center gap-[30px]">
        <div class="flex-1 flex flex-col items-center">


          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" style="width: 100%;"
            class="demo-ruleForm flex-1" status-icon>


            <el-row>
              <el-col :span="12">
                <el-form-item label="设备编号" prop="equipmentid">
                  <el-input v-model="ruleForm.equipmentid" />
                </el-form-item>
              </el-col>


              <el-col :span="12">
                <el-form-item label="水分参数A" prop="aa">
                  <el-input type="number" v-model="ruleForm.aa" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="水分参数B" prop="bb">
                  <el-input type="number" v-model="ruleForm.bb" />
                </el-form-item>
              </el-col>



              <el-col :span="12">
                <el-form-item label="酸值参数C" prop="cc">
                  <el-input type="number" v-model="ruleForm.cc" />
                </el-form-item>
              </el-col>


              <el-col :span="12">
                <el-form-item label="端口号" prop="comk">
                  <el-input v-model="ruleForm.comk" />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="酸值参数D" prop="dd">
                  <el-input type="number" v-model="ruleForm.dd" />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="设备ip地址" prop="ip">
                  <el-input v-model="ruleForm.ip" />
                </el-form-item>
              </el-col>

              <!-- jcdygslx -->
              <el-col :span="12">
                <el-form-item label="击穿电压公式类型" prop="jcdygslx">
                  <el-select v-model="ruleForm.jcdygslx" placeholder="请选择击穿电压公式类型">
                    <el-option v-for="(item, index) in jcdygslxOptions" :key="index" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>



              <el-col :span="12">
                <el-form-item label="击穿电压参数b" prop="jcb">
                  <el-input type="number" v-model="ruleForm.jcb" />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="击穿电压参数k" prop="jck">
                  <el-input type="number" v-model="ruleForm.jck" />
                </el-form-item>
              </el-col>



              <el-col :span="12">
                <el-form-item label="传感器类型" prop="type">
                  <el-select @change="changeselect" v-model="ruleForm.type" placeholder="请选择传感器类型">
                    <el-option v-for="(item, index) in appStore.tEquipmentControllerList" :key="index" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>


              <el-col :span="12">
                <el-form-item label="传感器类型名称" prop="typeName">
                  <el-input :disabled="true" v-model="ruleForm.typeName" />
                </el-form-item>
              </el-col>


              <el-col :span="12">
                <el-form-item label="油泵端口" prop="ybcom">
                  <el-input v-model="ruleForm.ybcom" />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="油泵ip" prop="ybip">
                  <el-input v-model="ruleForm.ybip" />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="介电损耗参数" prop="jdshcs">
                  <el-input v-model="ruleForm.jdshcs" />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="485协议对外地址" prop="rs485out">
                  <el-input v-model="ruleForm.rs485out" />
                </el-form-item>
              </el-col>
              
              <el-col :span="12">
                <el-form-item label="密度参数" prop="mdcs">
                  <el-input type="number" v-model="ruleForm.mdcs" />
                </el-form-item>
              </el-col>
              
              <el-col :span="12">
                <el-form-item label="水活度参数y" prop="shdcs">
                  <el-input type="number" v-model="ruleForm.shdcs" />
                </el-form-item>
              </el-col>
              
              <el-col :span="12">
                <el-form-item label="十六烷指数t50参数" prop="slwzst50cs">
                  <el-input type="number" v-model="ruleForm.slwzst50cs" />
                </el-form-item>
              </el-col>


              <template v-if="ruleForm.type == '0'">

                <el-col :span="12">
                  <el-form-item label="颗粒度标准" prop="kldbz">
                    <el-select v-model="ruleForm.kldbz" placeholder="请选择颗粒度标准">
                      <el-option v-for="(item, index) in transducerOptions" :key="index" :label="item.label"
                        :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="100度粘度标准" prop="nd100">
                    <el-input type="number" v-model="ruleForm.nd100" />
                  </el-form-item>
                </el-col>


                <el-col :span="12">
                  <el-form-item label="40度粘度标准" prop="nd40">
                    <el-input type="number" v-model="ruleForm.nd40" />
                  </el-form-item>
                </el-col>



              </template>

              <template v-if="ruleForm.type == '6'">

                <el-col :span="12">
                  <el-form-item label="偏移量公式类型">
                    <el-select v-model="ruleForm.pygslx" placeholder="请选择偏移量公式类型">
                      <el-option v-for="(item, index) in txytypev" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-col>



              </template>


            </el-row>






































          </el-form>




        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            <span class="text-white">确定</span>
          </el-button>
        </div>
      </template>
    </el-dialog>



  </div>
</template>

<style scoped>
:deep(.el-table__row) {
  background-color: #f3fdf1;
}

:deep(th>.el-table__cell) {
  background-color: #0f914c;
}

:deep(.el-table th.el-table__cell) {
  background-color: #0e904c;
}


:deep(.el-table th.el-table__cell .cell) {
  color: #fff;
}
</style>
